<template>
    <div class="sea-page box">
        <sea-grid col="2">

            <!-- 信息卡样式 1-->
            <div class="info-box">
                <span class="info-box-icon bg-red"><i class="fa fa-google-plus"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Likes</span>
                    <span class="info-box-number">41,410</span>
                    <br/>
                    <article class="info-box-more pull-right">
                        <span class="description-percentage text-green">环比：<i class="fa fa-caret-up"></i> 20%</span>
                        <span class="description-percentage text-red">等比：<i class="fa fa-caret-down"></i> 18%</span>
                    </article>
                </div>
            </div>
            <!-- box-end  -->

            <div class="info-box">
                <span class="info-box-icon bg-green"><i class="fa fa-google-plus"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Likes</span>
                    <span class="info-box-number">41,410</span>
                    <br/>
                    <article class="info-box-more pull-right">
                        <span class="description-percentage text-green">环比：<i class="fa fa-caret-up"></i> 20%</span>
                        <span class="description-percentage text-red">等比：<i class="fa fa-caret-down"></i> 18%</span>
                    </article>
                </div>
            </div>
            <!-- box-end  -->


            <div class="info-box bg-yellow">
                <span class="info-box-icon"><i class="fa fa-google-plus"></i></span>

                <div class="info-box-content">
                    <span class="info-box-text">Inventory</span>
                    <span class="info-box-number">5,200</span>

                    <div class="progress">
                        <div class="progress-bar" style="width: 50%"></div>
                    </div>
                    <span class="progress-description"> 50% Increase in 30 Days </span>
                </div>
            </div>
            <!-- box-end  -->

            <div class="info-box bg-primary">
                <span class="info-box-icon"><i class="fa fa-google-plus"></i></span>

                <div class="info-box-content">
                    <span class="info-box-text">Inventory</span>
                    <span class="info-box-number">5,200</span>

                    <div class="progress">
                        <div class="progress-bar" style="width: 50%"></div>
                    </div>
                    <span class="progress-description"> 50% Increase in 30 Days </span>
                </div>
            </div>
            <!-- box-end  -->

            <div class="flex-box">
                <div class="flex-body" style="position: relative;">
                    <sea-mark-triangle size="50" icon="fa fa-fw fa-warning">
                    </sea-mark-triangle>
                    <article>
                        <h4>三角形角标</h4>
                        <p>do sth.</p>
                        <p>in this panel</p>
                    </article>
                </div>
            </div>

            <div class="flex-box">
                <div class="flex-body" style="position: relative;">
                    <sea-mark-triangle size="50" icon="fa fa-fw fa-paperclip" color="#409eff">
                    </sea-mark-triangle>
                    <article>
                        <h4>三角形角标</h4>
                        <p>do sth.</p>
                        <p>in this panel</p>
                    </article>
                </div>
            </div>

        </sea-grid>
    </div>
</template>

<script>
export default {
    name: "card1"
}
</script>

<style scoped lang="scss">
@use "./info-box.scss";
</style>